<!-- 运营统计 -->
<template>
  <CommonPanel title="运营统计">
    <template #content>
      <div class="operateStatic">
        <div class="tip">
          <span>截至{{ nowaday }}，年度安全运营天数 <span class="count">3618</span>天 </span>
        </div>
        <div class="chart-part">
          <div id="operateChart"></div>
        </div>
      </div>
    </template>
  </CommonPanel>
</template>

<script setup>
import dayjs from 'dayjs';
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
import { operateOpts } from '@/cesiumTools/echartsOpts';
import { getLine } from '@/api/line';
import CommonPanel from '../panel/CommonPanel.vue';
// import { watchLineData } from '@/store';

const nowaday = ref(dayjs().format('YYYY/M/DD'));
// const dataSource = ref([]);
onMounted(async () => {
  const lineData = await getLine();
  // const lineData = await watchLineData();
  // dataSource.value = lineData;
  initChart(lineData);
});

const initChart = dataSource => {
  const myChart = echarts.init(document.getElementById('operateChart'));
  const data = dataSource.map(item => ({
    name: item.name,
    value: Number(item.length),
  }));
  const options = operateOpts(data);
  // console.log(options);
  myChart.setOption(options);
};
</script>
<style scoped>
.operateStatic {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tip {
  height: 30px;
  width: 100%;
  font-size: 14px;
  color: #fff;
  text-align: center;
  margin-top: 10px;
}

.count {
  font-size: 26px;
  color: #ef9c00;
  letter-spacing: 3px;
}

.chart-part {
  flex: 1;
  display: flex;
  pointer-events: all;
  padding-left: 10px;
}

#operateChart {
  pointer-events: all;
  width: 500px;
  height: 230px;
  margin: 0 auto;
}

.dataList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.data-item {
  width: 50%;
  color: #fff;
}
</style>
